﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Floor Plan Editor</title>
  <meta name="description" content="TypeScript: A simple floor plan editor." />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Copyright 1998-2019 by Northwoods Software Corporation. -->

  <style type="text/css">
    #menuBar {
      border: none;
      border: 0px;
      margin: 0px;
      padding: 0px;
      font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      width: auto;
    }

      #menuBar ul {
        background: #ededed;
        height: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      #menuBar li {
        float: left;
        padding: 0px;
      }

        #menuBar li a {
          background: #ededed;
          display: block;
          font-weight: normal;
          line-height: 25px;
          margin: 0px;
          padding: 0px 5px;
          text-align: center;
          text-decoration: none;
        }

      #menuBar > ul > li > a {
        color: black;
      }

      #menuBar ul ul a {
        color: black;
      }

      #menuBar li > a:hover,
      #menuBar ul li:hover > a {
        background: #007FFF;
        color: white;
        text-decoration: none;
      }

      #menuBar li ul {
        background: #9CCB19;
        display: none;
        height: auto;
        padding: 0px;
        margin: 0px;
        border: 0px;
        position: absolute;
        width: 150px;
        z-index: 200;
      }

      #menuBar li:hover ul {
        display: block;
      }

      #menuBar li li {
        background: #ededed;
        display: block;
        float: none;
        margin: 0px;
        padding: 0px;
        width: 150px;
      }

      #menuBar li:hover li a {
        background: none;
      }

      #menuBar li ul a {
        display: block;
        height: 25px;
        font-size: 12px;
        font-style: normal;
        margin: 0px;
        padding: 0px 10px 0px 15px;
        text-align: left;
      }

        #menuBar li ul a:hover,
        #menuBar li ul li:hover > a {
          background: #007FFF;
          border: 0px;
          color: white;
          text-decoration: none;
        }
    /*sub-sublist*/
    #nav li:hover ul ul {
      display: none;
    }

    #nav li li:hover ul {
      background: #9CCB19;
      margin-left: 150px;
      margin-top: -25px;
      display: block;
    }
      /*sub-sub-sublist*/
      #nav li li:hover ul ul {
        display: none;
      }

    #nav li li li:hover ul {
      background: #9CCB19;
      margin-left: 150px;
      margin-top: -25px;
      display: block;
      color: #0276FD;
    }

    input {
      text-align: center;
      font-size: large;
      float: left;
    }

    #myOverviewDiv {
      background-color: lightgray;
    }

    #currentFile {
      background: #1874CD;
      width: 100%;
      text-align: center;
      font-family: Arial;
      font-weight: bold;
      font-size: 14px;
      padding: 3px 0px;
      color: white;
    }

    .draggable {
      display: inline-block;
      vertical-align: top;
      border: 1px solid gray;
      background-color: #e2e2e2;
      position: absolute;
      top: 40%;
      left: 50%;
      width: 300px;
      height: 200px;
      z-index: 500;
    }

    .handle {
      background-color: #9CCB19;
      text-align: center;
      font: bold 12px sans-serif;
    }

    .elementText {
      font-family: Arial;
      font-size: medium;
      margin-left: 10px;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .mySavedFiles {
      font-family: Arial;
      font-size: medium;
      width: 250px;
      margin-left: 25px;
    }

    .elementBtn {
      margin-top: 20px;
      font-family: Arial;
      font-size: medium;
      margin-left: 20px;
    }
  </style>
  <script src="../samples/assets/require.js"></script>
  <script>
    function init() {
      require(["FloorPlanEditorScript"], function(app) {
        app.init();
        document.getElementById("newDocument").onclick = app.newDocument;
        document.getElementById("openDocuments").onclick = app.openDocument;
        document.getElementById("saveDocument").onclick = app.saveDocument;
        document.getElementById("saveDocumentAs").onclick = app.saveDocumentAs;
        document.getElementById("removeDocuments").onclick = app.removeDocument;

        document.getElementById("undo").onclick = app.undo;
        document.getElementById("redo").onclick = app.redo;
        document.getElementById("cutSelection").onclick = app.cutSelection;
        document.getElementById("copySelection").onclick = app.copySelection;
        document.getElementById("pasteSelection").onclick = app.pasteSelection;
        document.getElementById("deleteSelection").onclick = app.deleteSelection;
        document.getElementById("selectAll").onclick = app.selectAll;

        document.getElementById("alignLeft").onclick = app.alignLeft;
        document.getElementById("alignRight").onclick = app.alignRight;
        document.getElementById("alignTop").onclick = app.alignTop;
        document.getElementById("alignBottom").onclick = app.alignBottom;
        document.getElementById("alignCenterX").onclick = app.alignCenterX;
        document.getElementById("alignCenterY").onclick = app.alignCenterY;

        document.getElementById("alignRows").onclick = app.alignRows;
        document.getElementById("alignColumns").onclick = app.alignColumns;

        document.getElementById("Rotate45").onclick = app.rotate45;
        document.getElementById("Rotate_45").onclick = app.rotate_45;
        document.getElementById("Rotate90").onclick = app.rotate90;
        document.getElementById("Rotate_90").onclick = app.rotate_90;
        document.getElementById("Rotate180").onclick = app.rotate180;

        document.getElementById("grid").onclick = app.updateGridOption;
        document.getElementById("guidelines").onclick = app.updateGuidelinesOption;
        document.getElementById("snap").onclick = app.updateSnapOption;

        document.getElementById("move").onclick = app.arrowMode;
        document.getElementById("select").onclick = app.arrowMode;
        document.getElementById("scroll").onclick = app.arrowMode;

        document.getElementById("openBtn").onclick = app.loadFile;
        document.getElementById("cancelBtn").onclick = app.cancel1;
        document.getElementById("removeBtn").onclick = app.removeFile;
        document.getElementById("cancelBtn2").onclick = app.cancel2;
      });
    }
  </script>
</head>
<body onload="init()">
	<div>
		<div id="currentFile">(Unsaved File)</div>
		<div id="menuBar">
			<ul id="nav">
				<li><a href="#">File</a>
					<ul>
							<li><a href="#" id="newDocument">New</a></li>
							<li><a href="#" id="openDocuments">Open...</a></li>
							<li><a href="#" id="saveDocument">Save</a></li>
							<li><a href="#" id="saveDocumentAs">Save As...</a></li>
							<li><a href="#" id="removeDocuments">Delete...</a></li>
					</ul>
				</li>
				<li><a href="#">Edit</a>
					<ul>
						<li><a href="#" id="undo">Undo</a></li>
						<li><a href="#" id="redo">Redo</a></li>
						<li><a href="#" id="cutSelection">Cut</a></li>
						<li><a href="#" id="copySelection">Copy</a></li>
						<li><a href="#" id="pasteSelection">Paste</a></li>
						<li><a href="#" id="deleteSelection">Delete</a></li>
						<li><a href="#" id="selectAll">Select All</a></li>
					</ul>
				</li>
				<li><a href="#">Align</a>
					<ul >
						<li><a href="#" id="alignLeft">Left Sides</a></li>
						<li><a href="#" id="alignRight">Right Sides</a></li>
						<li><a href="#" id="alignTop">Tops</a></li>
						<li><a href="#" id="alignBottom">Bottoms</a></li>
						<li><a href="#" id="alignCenterX">Center X</a></li>
						<li><a href="#" id="alignCenterY">Center Y</a></li>
					</ul>
				</li>
				<li><a href="#">Space</a>
					<ul >
						<li><a href="#" id="alignRows">In Row...</a></li>
						<li><a href="#" id="alignColumns">In Column...</a></li>
					</ul>
				</li>
				<li><a href="#">Rotate</a>
					<ul>
						<li><a id="Rotate45" href="#">45°</a></li>
						<li><a id="Rotate_45" href="#">-45°</a></li>
						<li><a id="Rotate90" href="#">90°</a></li>
						<li><a id="Rotate_90" href="#">-90°</a></li>
						<li><a id="Rotate180" href="#">180°</a></li>
					</ul>
				</li>
				<li><a href="#">Options</a>
					<ul>
						<li><a href="#"><input id="grid" type="checkbox" name="options" value="grid">Grid</a></li>
						<li><a href="#"><input id="guidelines" type="checkbox" name="options" value="0" checked="checked">Guidelines</a></li>
						<li><a href="#"><input id="snap" type="checkbox" name="options" value="0">Snapping</a></li>
						<li><a href="#">Arrow Keys >></a>
							<form >
								<ul>
									<li><a href="#"><input type="radio" name="arrow" id="move" checked="checked">Move</a></li>
									<li><a href="#"><input type="radio" name="arrow" id="select">Select</a></li>
									<li><a href="#"><input type="radio" name="arrow" id="scroll">Scroll</a></li>
								</ul>
							</form>
						</li>
					</ul>
				</li>
				<li><a href="#" onclick="window.open('FloorPlanMonitor.html')">Monitor</a></li>
			</ul>
		</div><!--END menu bar -->

		<div id="PaletteAndDiagram" style="position: relative; overflow: hidden; width: 100%;">
			<div id="sideBar" style="float:left; width:23%; min-height: 500px; text-align:center">
				<div class="handle">Palette:</div>
				<div id="myPaletteDiv" style="border:solid 1px gray; width: 100%; min-height: 625px"></div>
				<div class="handle">Overview:</div>
				<div id="myOverviewDiv" style="border:solid 1px gray; width: 100%; height:225px;"></div>
			</div>
			<div id="myDiagramDiv" style="position: absolute; border: solid 1px gray; width:77%; height: 100%; min-height:500px; margin-left:23%; background-color:white"></div>
		</div>

		<div id="openDocument" class="draggable">
			<div id="openDraggableHandle" class="handle">Open File</div>
			<div id="openText" class="elementText">Choose file to open...</div>
			<select id="mySavedFiles" class="mySavedFiles" ></select>
			<br />
			<button id="openBtn" class="elementBtn" type="button"style="margin-left: 70px">Open</button>
			<button id="cancelBtn" class="elementBtn" type="button">Cancel</button>
		</div>

		<div id="removeDocument" class="draggable">
			<div id="removeDraggableHandle" class="handle">Delete File</div>
			<div id="removeText" class="elementText">Choose file to remove...</div>
			<select id="mySavedFiles2" class="mySavedFiles" ></select>
			<br />
			<button id="removeBtn" class="elementBtn" type="button" style="margin-left: 70px">Remove</button>
			<button id="cancelBtn2" class="elementBtn" type="button">Cancel</button>
		</div>
		<p>
			This sample demonstrates several custom <a>Tool</a>s, defined in their own files:
			<a href="GuidedDraggingTool.js">GuidedDraggingTool.js</a>, <a href="ResizeMultipleTool.js">ResizeMultipleTool.js</a>, <a href="RotateMultipleTool.js">RotateMultipleTool.js</a>,
			and a custom <a>CommandHandler</a>: <a href="DrawCommandHandler.js">DrawCommandHandler.js</a>.
		</p>
	</div>
</body>
</html>
